<template>
  <view>
    <uni-row>
      <view class="navbar">
        <view class="nav-item" :class="{current:currentIndex === 0}" @click="handleChange(0)">
          全部
        </view>
        <view class="nav-item" :class="{current:currentIndex === 1}" @click="handleChange(1)">
          待审批
        </view>
        <view class="nav-item" :class="{current:currentIndex === 2}" @click="handleChange(2)">
          已拒绝
        </view>
        <view class="nav-item" :class="{current:currentIndex === 3}" @click="handleChange(3)">
          已同意
        </view>
      </view>
    </uni-row>
<!--    <uni-fab-->
<!--        :content="content"-->
<!--        horizontal="right"-->
<!--        @trigger="handleClick"-->
<!--    />-->
    <view class="swiper-box">
      <scroll-view class="backg">
        <uni-col class="info-box" :xs="24" :sm="11" v-for="item in feedList" :key="item.feed.id" @click="handleUpdate(item.feed.id)">
          <uni-row style="margin-left: 20px">
            <uni-col :span="16">
              <uni-title :title="item.feed.batchNumber" type="h1"/>
            </uni-col>
            <uni-col :span="8" class="status">
              <uni-tag v-if="item.change != null"
                        text="待同步"
                       circle
                       inverted
                       style="margin-right: 15px"
              ></uni-tag>
              <uni-tag :text="item.feed.tableStatus === '2' ? '已拒绝' : item.feed.tableStatus == '0' ? '通过' : '待审批'"
                       circle
                       inverted
                       :type="item.feed.tableStatus === '2' ? 'error' : item.feed.tableStatus == '0' ? 'success' : 'primary'"
                       style="margin-right: 15px"></uni-tag>
            </uni-col>
          </uni-row>
          <uni-row style="margin-left: 20px">
            <uni-col>
              <uni-row>
                <uni-col :span="12" class="text">
                  类&nbsp;&nbsp;&nbsp;&nbsp;型 : {{ item.feed.bugType }}
                </uni-col>
                <uni-col :span="12" class="text">
                  轮&nbsp;&nbsp;&nbsp;&nbsp; 次 : {{ item.feed.round }}
                </uni-col>
                <uni-col :span="12" class="text">
                  换 虫 数 量 : {{ item.feed.changeNum }}
                </uni-col>
                <uni-col :span="12" class="text">
                  周&nbsp;&nbsp;&nbsp;&nbsp;期 : {{ item.feed.period != '0' ? '26天' : '28天' }}
                </uni-col>
                <uni-col :span="12" class="text">
                  本次换料时间 : {{ item.feed.reloadDay }}
                </uni-col>
                <uni-col :span="12" class="text">
                  挑 &nbsp; 虫 &nbsp; 月 &nbsp; 份 : {{ item.feed.optionMonth }}
                </uni-col>
              </uni-row>
            </uni-col>
          </uni-row>
        </uni-col>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {AuditClickHandle} from "../../pagesVM/audit";
import UniTag from "../../uni_modules/uni-tag/components/uni-tag/uni-tag.vue";
import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col.vue";

const {
  handleClick,
  feedList,
  content,
  currentIndex,
  handleChange,
  handleUpdate
} = AuditClickHandle()


</script>

<style scoped lang="scss">
.navbar {
  position: fixed;
  left: 0;
  top: var(--window-top);
  display: flex;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  z-index: 1000;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    color: #3a3a3a;
    position: relative;

    &.current {
      color: #4cd964;

      &:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 120px;
        height: 0;
        border-bottom: 4px solid #4cd964;
      }
    }
  }
}

.swiper-box {
  margin-top: 60px;
  height: 100%;
}

.info-box {
  margin: 10px;
  border-radius: 5px;
  padding: 20px;
  background-color: white;
}

.status {
  text-align: right;
  line-height: 40px;
}

.backg {
  background-color: rgba(240, 240, 240, 0.76);
  height: 100%;
}

.text {
  font-size: 20px;
  color: #7f7f7f;
}
</style>
